<!--
 * @Author       :
 * @Date         : 2022-03-21 23:14:10
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-03-27 22:07:56
 * @Description  : 切换皮肤
-->
<template>
  <el-dropdown
    v-bind="$attrs"
    trigger="click"
    class="theme"
    @command="handleSetTheme"
  >
    <div>
      <el-tooltip :content="$t('msg.navBar.themeChange')">
        <svg-icon icon="change-theme"></svg-icon>
      </el-tooltip>
    </div>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          {{ $t('msg.theme.themeColorChange') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>

  </el-dropdown>

  <!-- 弹出层 -->
  <div>
    <select-color v-model="selectColorVisible"></select-color>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SelectColor from './components/SelectColor.vue'
const handleSetTheme = command => {
  selectColorVisible.value = true
}

// 弹窗
const selectColorVisible = ref(false)
</script>

<style scoped>

</style>
